<template>
    <div style="padding-left:5px;">
        <el-row>
            <el-col align="left">
                <el-form label-width="100px">
                    <el-form-item label="速度：">
                        <el-input-number v-model="speed" :min="1" :max="10000" :step="1"></el-input-number>
                    </el-form-item>
                    <el-form-item label-width="0" style="padding-left: 10px;">

                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col align="left">
                <el-button type="primary" @click="start" v-if="paused">开始</el-button>
                <el-button type="primary" @click="pause" v-else>暂停</el-button>
            </el-col>
        </el-row>
        <div style="padding-left:10px;">
            <v-stage ref="stage" :config="stageSize" >
                <v-layer ref="layer">

                    <v-wedge ref="wedge1" :config="{
                    x: this.initX,
                    y: this.initY,
                    radius: this.radius,
                    angle: 120,
                    fill: 'red',
                    stroke: 'red',
                    strokeWidth: 1,
                    rotation: rotation1,
                  }"/>

                    <v-wedge :config="{
                    x: this.initX,
                    y: this.initY,
                    radius: this.radius,
                    angle: 120,
                    fill: 'green',
                    stroke: 'green',
                    strokeWidth: 1,
                    rotation: rotation2,
                  }"/>

                    <v-wedge :config="{
                    x: this.initX,
                    y: this.initY,
                    radius: this.radius,
                    angle: 120,
                    fill: 'blue',
                    stroke: 'blue',
                    strokeWidth: 1,
                    rotation: rotation3,
                  }"/>



                </v-layer>
            </v-stage>
        </div>
    </div>

</template>

<script>
    import Konva from "konva";
    const width = window.innerWidth - 50;
    const height = 500;

    export default {
        data() {
            return {
                initX: 200,
                initY: 200,
                radius: 100,
                speed: 1,
                rotation1: 0,
                rotation2: 120,
                rotation3: 240,
                windowInnerWidth: 0,
                stageSize: {
                    width: width,
                    height: height
                },
                anim: null,
                paused: true,
            };
        },
        methods: {
            start() {
                this.paused = false
                this.anim.start();
            },
            pause() {
                this.paused = !this.paused
            },
            renderResize() {
                this.windowInnerWidth = window.innerWidth - 50;
            },
        },
        computed: {
        },
        mounted() {
            this.windowInnerWidth = window.innerWidth
            const vm = this;
            window.addEventListener("resize", this.renderResize, false)

            const wedge1 = this.$refs.wedge1.getNode();
            this.anim = new Konva.Animation(function() {
                if(!vm.paused) {
                    vm.rotation1 += vm.speed //* delta1
                    vm.rotation2 += vm.speed //* delta1
                    vm.rotation3 += vm.speed //* delta1
                }
            }, wedge1.getLayer());

        }
    };
</script>
